// src/app/ThemeToggle.tsx
"use client"; // 标记为客户端组件

import { useState, useEffect } from "react";

export default function ThemeToggle() {
  const [theme, setTheme] = useState<string>("dark");
  // useEffect(() => {
  //   // 从 localStorage 中读取主题
  //   const savedTheme = localStorage.getItem("theme");
  //   if (savedTheme) {
  //     setTheme(savedTheme);
  //     document.documentElement.setAttribute("data-theme", savedTheme);
  //   } else {
  //     // 如果没有保存的主题，使用系统默认主题
  //     const userPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  //     console.log("userPrefersDark", userPrefersDark);
  //     const initialTheme = !userPrefersDark ? "dark" : "light";
  //     setTheme(initialTheme);
  //     document.documentElement.setAttribute("data-theme", initialTheme);
  //   }
  // }, []);

  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    document.documentElement.setAttribute("data-theme", newTheme);
    localStorage.setItem("theme", newTheme);
  };

  return (
    <button onClick={toggleTheme} className='font-semibold'>
      切换主题色
    </button>
  );
}
